import React, { Component } from 'react';
import { NavBar,IndexBar, List  } from 'antd-mobile'
import { withRouter } from 'react-router-dom';
import service from '../../api';
import './city.css'

class Area extends Component {
    constructor(props) {
        super(props);
        this.state = {
            area: [],
            groups: []
        }
    }
    back() {
        this.props.history.push('/index/home')
    }
    componentDidMount() {
        service.city.city_sortcity({}).then((res) => {
            console.log(res.data);
            
            res.data.forEach((item, index) => {
                // console.log(item);
                // console.log(item.data);
            })
            this.setState({ area: res.data })
        })
    }
    clicked(item,index) {
        // console.log(index);
        // console.log(item);
        this.props.history.push({pathname:'/index/host',state:{areas:item}})
    }
    render() {
        return (
            <div className='area'>
                <NavBar onBack={() => this.back()}>城市列表</NavBar>
                <IndexBar>
                    {
                        this.state.area.map((item, index) => {
                            return (
                                <IndexBar.Panel
                                    index={item.letter.toUpperCase()}
                                    title={item.letter.toUpperCase()}
                                    key={item.letter}
                                >
                                    <List>
                                        {
                                            item.data.map((item, index) => {
                                                return (
                                                    <List.Item key={index} onClick={()=>{this.clicked(item,index)}}>{item.name}</List.Item>
                                                )
                                            })
                                        }
                                    </List>
                                </IndexBar.Panel>
                            )
                        })
                    }
                </IndexBar>
            </div>
        );
    }
}

export default withRouter(Area);
